<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		exceptApi
	} from '@/apis/task.js'

	// 1. 异常上报表单数据
	const formData = ref({
		transportTaskId: '', // 任务 id
		exceptionTime: "", // 异常时间
		exceptionPlace: "", // 异常位置
		exceptionType: "", //  异常类型
		exceptionDescribe: "", // 异常描述
		exceptionImagesList: [] //  异常图片描述
	})

	onLoad(({
		transportTaskId
	}) => {
		// 存储任务 id
		formData.value.transportTaskId = transportTaskId
	})




	// 2. 打开地图=》选择一个位置
	async function onLocationChoose() {
		const res = await uni.chooseLocation()
		console.log('选择的位置信息：', res.address);
		formData.value.exceptionPlace = res.address
	}


	// 3. 选择异常类型=》组件 ref=》获取弹层组件的实例
	// 定义 popup 组件展示的数据
	const exceptionTypes = reactive([
		// 说明：text 异常描述 checked异常类型选中状态
		{
			text: '发动机启动困难',
			checked: false
		},
		{
			text: '不着车，漏油',
			checked: false
		},
		{
			text: '照明失灵',
			checked: false
		},
		{
			text: '排烟异常、温度异常',
			checked: false
		},
		{
			text: '其他问题',
			checked: false
		},
	])
	// 点击处理异常项的选中
	const selectType = (i) => {
		exceptionTypes[i].checked = !exceptionTypes[i].checked
	}
	const popup = ref(null)
	// 点击类型弹层确认按钮=》关闭
	function onPopupConfirm() {
		/**
		 * 1. 获取选中的异常类型
		 * 2. 异常类型处理成以｜分割的字符串（后台要求的参数格式）
		 * 3. 回显视图
		 * 4. 关闭弹层
		 */
		// console.log('list:', exceptionTypes);
		const selected = exceptionTypes.filter(item => item.checked)
		console.log('选中的异常类型：', selected);
		if (selected.length > 0) {
			formData.value.exceptionType = selected.map(item => item.text).join('|')
		} else {
			uni.showToast({
				title: '请至少选择一个异常项目！'
			})
		}


		popup.value.close()
	}

	// 打开弹层=》打开选择异常类型的弹层
	function onPopupOpen() {
		popup.value.open()
	}

	// 4. 异常描述
	const wordTotal = computed(() => formData.value.exceptionDescribe.length)

	// 5. 异常图片
	//  存储上传图片的结果和回显
	const exceptImgs = ref([])

	// 6. 兜底校验=> true 禁用 ｜ false 不禁用
	const isSubmitOk = computed(() => {
		return !formData.value.exceptionTime || !formData.value.exceptionPlace || !formData.value.exceptionType ||
			!exceptImgs.value.length
	})
	// 表单提交
	const submit = async () => {
		/**
		 * 1. 处理异常图片格式
		 * 2. 调用接口
		 * 3. 提示并跳转任务列表页面
		 */
		formData.value.exceptionImagesList = exceptImgs.value.map(({
			url
		}) => ({
			url
		}))
		console.log('异常上报数据：', formData.value);
		await exceptApi(formData.value)

		setTimeout(() => {
			uni.showToast({
				title: '异常上报成功！'
			})
		}, 1000)

		uni.reLaunch({
			url: '/pages/task/index'
		})
	}
</script>

<template>
	<view class="page-container">
		<scroll-view class="scroll-view" scroll-y>
			<view style="margin: 30rpx" class="scroll-view-wrapper">
				<uni-list :border="false">
					<!-- 1. 异常时间选择 -->
					<uni-list-item show-arrow title="异常时间">
						<!--  通过具名插槽footer自定义右侧显示的内容=》日期选择器 -->
						<template #footer>
							<!-- 
							uni-datetime-picker通过 v-model 获取用户选择的日期时间
							 -->
							<uni-datetime-picker v-model="formData.exceptionTime">
								<!-- 回显选择的异常时间 -->
								<view class="picker-value">{{ formData.exceptionTime || '请选择' }}</view>
							</uni-datetime-picker>
						</template>
					</uni-list-item>
					<!-- 2. 选择异常位置 -->
					<uni-list-item show-arrow clickable ellipsis="1" @click="onLocationChoose" title="上报位置"
						:rightText="formData.exceptionPlace || '请选择'" />
					<!-- 3. 选择异常类型 -->
					<uni-list-item show-arrow clickable @click="onPopupOpen" title="异常类型"
						:rightText="formData.exceptionType || '请选择'" />
					<!-- 4. 输入异常描述 -->
					<uni-list-item direction="column" title="异常描述">
						<template v-slot:footer>
							<view class="textarea-wrapper">
								<textarea v-model="formData.exceptionDescribe" class="textarea" placeholder="请输入异常描述"></textarea>
								<view class="words-count">{{wordTotal}}/50</view>
							</view>
						</template>
					</uni-list-item>
					<!-- 5. 上传图片描述 -->
					<uni-list-item :border="false" style="margin-top: -30rpx" direction="column" title="上传图片（最多6张）">
						<template v-slot:footer>
							<uni-file-picker v-model="exceptImgs" file-extname="jpg,webp,gif,png" limit="6"></uni-file-picker>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</scroll-view>
		<view class="fixbar">
			<!-- 表单提交 -->
			<button @click="submit" :disabled="isSubmitOk" class="button disable">提交</button>
		</view>
		<!-- == 异常类型弹层 == -->
		<uni-popup ref="popup" :mask-click="true" type="bottom">
			<!-- 弹层的内容 -->
			<uni-list class="popup-action-sheet">
				<uni-list-item>
					<template v-slot:header>
						<view class="header">选择类型</view>
					</template>
				</uni-list-item>
				<!-- 异常选择列表 -->

				<uni-list-item v-for="(exceptionType, index) in exceptionTypes" :key="exceptionType.text"
					:title="exceptionType.text">
					<template #footer>
						<checkbox-group @change="selectType(index)" class="checkbox">
							<checkbox :checked="exceptionType.checked" color="#EF4F3F" />
						</checkbox-group>
					</template>
				</uni-list-item>

				<!-- 确定选择 -->
				<uni-list-item>
					<template v-slot:body>
						<button @click="onPopupConfirm" class="button">确定</button>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>